<template>
  <div class="food-detail">
    <Header /> <!-- 导航栏组件 -->
    <div class="container mt-5">
      <h1 class="text-primary mb-4">{{ food.name }}</h1> <!-- 美食名称 -->
      <img :src="food.image" alt="food image" class="img-fluid mb-4 rounded" /> <!-- 美食图片 -->
      <div class="card mb-4 shadow-sm">
        <div class="card-body">
          <h2 class="text-secondary">制作步骤</h2>
          <p class="lead">{{ food.steps }}</p> <!-- 制作步骤 -->
        </div>
      </div>
      <div class="card mb-4 shadow-sm">
        <div class="card-body">
          <h2 class="text-secondary">所需食材</h2>
          <ul class="ingredients-list list-group list-group-horizontal">
            <li class="list-group-item" v-for="ingredient in food.ingredients" :key="ingredient"> <!-- 遍历食材数组，生成食材列表 -->
              <div class="ingredient-name">{{ ingredient.name }}</div>
              <div class="ingredient-amount">{{ ingredient.amount }}</div>
            </li>
          </ul>
        </div>
      </div>
      <div class="card mb-4 shadow-sm">
        <div class="card-body">
          <h2 class="text-secondary">评论</h2>
          <div v-for="comment in food.comments" :key="comment.text" class="mb-3"> <!-- 遍历评论数组，生成评论列表 -->
            <Comment :comment="comment" /> <!-- 评论组件 -->
          </div>
          <div v-if="user">
            <textarea v-model="newComment" class="form-control" placeholder="发表评论"></textarea> <!-- 评论输入框 -->
            <button @click="submitComment" class="btn btn-primary mt-2">提交</button> <!-- 提交按钮 -->
          </div>
        </div>
      </div>
    </div>
    <Footer /> <!-- 页脚组件 -->
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'; // 导入 Vuex 中的 mapState 和 mapActions 辅助函数
import Header from '@/components/Header.vue'; // 导入 Header 组件
import Footer from '@/components/Footer.vue'; // 导入 Footer 组件
import Comment from '@/components/Comment.vue'; // 导入 Comment 组件

export default {
  components: {
    Header, // 注册 Header 组件
    Footer, // 注册 Footer 组件
    Comment, // 注册 Comment 组件
  },
  data() {
    return {
      newComment: '', // 新评论内容
    };
  },
  computed: {
    ...mapState(['user', 'foods']), // 映射 state 中的 user 和 foods 到组件中
    food() {
      return this.foods.find(food => food.id === parseInt(this.$route.params.id)) || {}; // 计算当前显示的美食信息
    },
  },
  methods: {
    ...mapActions(['addComment']), // 映射 addComment 动作到组件方法
    submitComment() {
      if (this.newComment.trim() === '') return; // 如果评论为空，则不提交
      this.addComment({
        foodId: parseInt(this.$route.params.id), // 获取当前美食的 ID
        comment: { user: this.user.username, text: this.newComment }, // 构建评论对象
      });
      this.newComment = ''; // 清空评论输入框
    },
  },
};
</script>

<style scoped>
.food-detail {
  text-align: center; /* 设置文本居中对齐 */
}

.img-fluid {
  max-height: 400px; /* 设置图片最大高度 */
  object-fit: cover; /* 保持图片宽高比 */
}

.card {
  margin-bottom: 1.5rem; /* 设置卡片底部外边距 */
}

.text-primary {
  color: #007bff; /* 设置主标题文字颜色 */
}

.text-secondary {
  color: #6c757d; /* 设置副标题文字颜色 */
}

.lead {
  font-size: 1.25rem; /* 设置主要内容字体大小 */
  font-weight: 300; /* 设置主要内容字体粗细 */
}

.ingredients-list {
  display: flex; /* 设置食材列表为 Flex 布局 */
  flex-wrap: wrap; /* 允许换行 */
  justify-content: space-around; /* 水平均匀分布 */
  padding: 0;
  margin: 0;
}

.list-group-item {
  border: none; /* 移除边框 */
  display: flex; /* 设置为 Flex 布局 */
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 水平居中 */
  font-size: 1rem; /* 设置字体大小 */
  font-weight: 400; /* 设置字体粗细 */
  width: 100px; /* 固定宽度 */
}

.ingredient-name {
  font-weight: bold; /* 设置食材名称加粗 */
  margin-bottom: 0.5rem; /* 设置底部外边距 */
}

.ingredient-amount {
  color: #6c757d; /* 设置食材用量颜色 */
}
</style>
